<template>
  <group-layout title="图片编辑">
    <a-row :gutter="10" class="edit-group" v-if="configList.length>0">
      <a-col :span="5" class="edit-label">变量名</a-col>
      <a-col :span="19">
        <a-select size="small" style="width: 100%"
                  :getPopupContainer="trigger => trigger.parentNode"
                  v-model="editLayer.field"
                  @change="handleFieldChange"
        >
          <a-select-option v-for="(config,index) in configList" :value="config.field" :key="index">
            {{ config.name }}
          </a-select-option>
        </a-select>
      </a-col>
    </a-row>
    <a-row :gutter="10" class="edit-group" v-if="editLayer.useField">
      <a-col :span="5" class="edit-label">{{placeholder}}</a-col>
      <a-col :span="19">
        <a-input-search size="small" v-model="editLayer.fieldContent" @change="handleFieldContentChange" :placeholder="'请输入'+placeholder" @search="handleFieldContentChange">
          <a-button slot="enterButton" icon="reload" type="primary"/>
        </a-input-search>
      </a-col>
    </a-row>
    <a-row :gutter="10" class="edit-group">
      <a-col :span="5" class="edit-label">图片</a-col>
      <a-col :span="19">
        <a-input-search placeholder="图片地址" size="small" @search="triggerUpload" v-model="editLayer.content">
          <a-button slot="enterButton" icon="upload" type="primary">
            上传
          </a-button>
        </a-input-search>
      </a-col>
    </a-row>
  </group-layout>
</template>

<script>
  import imgDescription from './desc'
  import GroupLayout from '../../group/GroupLayout'
  import {useDataAdapter} from '../../../model/dataAdapter'
  import {layerMixins} from '../../../mixins/layerMixins'
  import nineUpload from '@jiuji/nine-upload'
  export default {
    name: 'editor',
    components: {GroupLayout},
    mixins: [layerMixins],
    computed: {
      placeholder () {
        const config = this.configList.find(item => item.field === this.editLayer.field)
        return config.placeholder
      }
    },
    data () {
      return {
        configList: imgDescription.configList,
        ratio: 1
      }
    },
    methods: {
      handleFieldChange (val) {
        if (val === '') {
          this.editLayer.useField = false
          this.editLayer.fieldContent = ''
          this.editLayer.content = ''
          return
        }
        this.editLayer.useField = true
        if (this.editLayer.fieldContent !== '') {
          this.handleFieldContentChange()
        }
      },
      handleFieldContentChange () {
        const render = useDataAdapter(this).layerRender
        render(
          {
            floor: this.editFloor,
            layer: this.editLayer,
            callBack: () => {}
          }
        )
      },
      async triggerUpload () {
        const { err, res } = await nineUpload({
          form: {
            collection: 'adm'
          },
          onPickFiles: async files => {
            if (window.nineUploadData) {
              return window.nineUploadData
            }
            try {
              const { code = 0, userMsg = '', data = { appId: '', token: '' } } = await this.$api.common.getUploadToken()
              if (code === 0) {
                window.nineUploadData = data
                setTimeout(() => { // appId和token30分钟过期，要清理一下
                  window.nineUploadData = null
                }, 30 * 60 * 1000)
                return data
              } else {
                this.$message.error(userMsg)
              }
            } catch (e) {
              this.$message.error(e)
            }
          }
        })
        if (err) {
          this.$message.error(`${err.name}上传失败：${err.err}`)
          return
        }
        this.editLayer.content = res.fileUrl
        let img = new Image()
        img.src = res.fileUrl
        img.onload = () => {
          this.editLayer.imgRatio = img.height / img.width
          this.editLayer.height = this.editLayer.width * this.editLayer.imgRatio
          this.editLayer.imgRatio = null
        }
      }
    }
  }
</script>

<style scoped lang="scss">
@import "../../../style/editor.scss";
</style>
